<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="我要成为供应商">
        <el-form :inline="true" class="demo-form-inline">
          <goods_category ref="goodsCategory"></goods_category>
          <el-form-item label="上传营业执照">
            <el-upload
              :limit="1"
              list-type="picture-card"
              action=""
              :on-change="changeImag"
              :auto-upload="false"
              :accept="accept"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <br>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交申请</el-button>
            <!--          <el-button @click="resetForm('addForm')">重置</el-button>-->
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import goods_category from "../goods_category";
    export default {
        name: "apply_for_supplier",
      data() {
        return {
          accept: ".jpg,.png",//上传格式限制,
          addForm: {
            id:sessionStorage.getItem('id'),
            img:null
          },
        };
      },
      methods: {
        submitForm() {
          //进行提交，获取子数据
          //数据组装
          //获取选择的商品分类数组
          var formData = new FormData();
          formData.append("id",this.addForm.id);
          Object.keys(this.$refs["goodsCategory"].ShopTypeInfos).forEach(index=>{
            formData.append("supplierGoodsCategoryIds", this.$refs["goodsCategory"].ShopTypeInfos[index]);
          });
          formData.append("img", this.addForm.img.raw);
          //调用异步，进行申请
          this.$axios({
            method: 'post',
            url: "apply_for_supplier.action",
            data: formData,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(res => {
            if(res.data.x){
              this.$message.success(res.data.msg);
              //跳转路由
              this.$router.push("/");
            }else {
              this.$message.error(res.data.msg)
            }
          }).catch(err => {
            this.$message.warning(err);
          })
        },
        resetForm(formName) {
          //重置表单
          this.$refs[formName].resetFields();
        },
        handlePictureCardPreview(file) {
          //显示图片
          this.dialogVisible = true;
        },
        changeImag(file) {
          //获取文件信息
          this.addForm.img=file;
        },
        handleRemove(file, fileList) {
          //移除图片
          console.log(file, fileList);
        }
      },
      created() {
        this.$nextTick(item=>{
          this.$refs.goodsCategory.getAllshopTypeInfos(undefined);
        })
      },
      components:{
        goods_category
      }
    }
</script>

<style scoped>

</style>
